<script setup lang="ts">
import { useToggle } from '@vueuse/shared'
import { useDark } from "@vueuse/core";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue"
import { Decoration1, Decoration2,BorderBox11 } from '@kjgl77/datav-vue3'
import {ref, reactive, toRefs} from 'vue'
import { useRoute, useRouter } from "vue-router";
import {useStore} from 'vuex'
import { darkTheme } from 'naive-ui'
let store = useStore()
// 获取路由信息
let route = useRoute();
const router = useRouter();
const title = store.getters.getTitle
const theme = ref<boolean>(false)
const changTheme = () => {
  theme.value = !theme.value
  return theme;
}
const isDark = useDark({
  // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
  storageKey: 'useDarkKEY',
  // 暗黑class名字
  valueDark: 'dark',
  // 高亮class名字
  valueLight: 'light',
})
const toggle = useToggle(isDark);
</script>
<template >
  <div class="demo">
    <div >
      <div >

        <div>这是一个切换到深色主题模式demo</div>
        <el-switch
            inline-prompt
            v-model="theme"
            @click="toggle()"
        >
        </el-switch>
      </div>
      <img style="height: 80px;width: 80px" src="@/assets/vue.svg">
    </div>
    <div>
      <span style="font-size: 50px">首页----{{title}}</span>
    </div>
    <div>
      <el-row class="mb-4" style="margin-top: 10%">
        <el-button >Default</el-button>
        <el-button type="primary" >Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </el-row>
      <el-row style="margin-top: 10%">
        <el-button :icon="Search" circle />
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="success" :icon="Check" circle />
        <el-button type="info" :icon="Message" circle />
        <el-button type="warning" :icon="Star" circle />
        <el-button type="danger" :icon="Delete" circle />
      </el-row>
    </div>
    <div>
      <BorderBox11 title="dv-border-box-11" :title-width="400" style="height: 300px">

      </BorderBox11>
    </div>
  </div>
</template>
<style scoped lang="sass">

</style>
